<template>
  <div>
    <el-card shadow='never'>
      <template #header>
        <div>
          日志管理
        </div>
      </template>
      <el-form ref='formRef' :inline='true' :model='searchForm' label-width='80px'>
        <el-form-item label='用户名' prop='user_name'>
          <el-input v-model='searchForm.user_name' />
        </el-form-item>

        <el-form-item label='手机号' prop='user_mobile'>
          <el-input v-model='searchForm.user_mobile' />
        </el-form-item>
        <el-form-item label='用户ID' prop='user_id'>
          <el-input v-model='searchForm.user_id' />
        </el-form-item>
        <el-form-item>
          <el-button type='primary' @click='query'>搜索</el-button>
          <el-button @click='clear'>清空</el-button>
          <el-button type='warning' @click='downloadData'>导出</el-button>
        </el-form-item>
      </el-form>
      <el-table :data='tableData' border stripe style='width: 100%'>
        <el-table-column prop='id' label='ID' />
        <el-table-column prop='user_id' label='员工ID' />
        <el-table-column prop='user_name' label='员工姓名'>
          <template #default='{ row }'>
            <div>
              {{ row.username }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop='departmentname' label='部门' />
        <el-table-column prop='usermobile' label='手机号' />

        <el-table-column prop='type' label='操作类型' />
        <el-table-column prop='content' label='内容' />

        <el-table-column prop='created_at' label='创建时间' />
        <el-table-column prop='updated_at' label='更新时间' />
      </el-table>
      <el-pagination class='mt-3' :current-page='currentPage'
                     @current-change='handleCurrentChange' background :total='pageObj.total'
                     :page-size='pageObj.pageSize'
                     layout='total,prev, pager, next' />

    </el-card>
  </div>
</template>

<script setup lang='ts'>
//表单
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'

const { index, download } = useLog()
const tableData = ref([])
const pageObj = reactive({
  total: 0,
  pageSize: 0,
  pagerCount: 0,
  currentPage: 0,
})

const formRef = ref()
const currentPage = ref(1)

const getData = async (page: number = 1, obj: Object = {}) => {
  let { data } = await index(page, obj)
  tableData.value = data.data
  pageObj.total = data.total
  pageObj.currentPage = data.current_page
  pageObj.pageSize = data.per_page
}
onMounted(() => {
  getData()
})

const handleCurrentChange = async (val: number) => {
  currentPage.value = val
  let { data } = await index(currentPage.value, searchForm)
  tableData.value = data.data
  pageObj.total = data.total
  pageObj.currentPage = data.current_page
  pageObj.pageSize = data.per_page
}

const ruleFormRef = ref<FormInstance>()

const query = async () => {
  if (searchForm.user_name || searchForm.user_id || searchForm.user_mobile) {
    let { data } = await index(currentPage.value, searchForm)
    tableData.value = data.data
    pageObj.total = data.total
    pageObj.currentPage = data.current_page
    pageObj.pageSize = data.per_page
  } else {
    ElMessage.warning('请输入内容')
  }
}
const clear = async () => {
  currentPage.value = 1
  formRef.value.resetFields()
  searchForm.user_name = ''
  searchForm.user_id = ''
  searchForm.user_mobile = ''
  let { data } = await index(1, {})

  tableData.value = data.data
  pageObj.total = data.total
  pageObj.currentPage = data.current_page
  pageObj.pageSize = data.per_page
}
let searchForm = reactive({
  user_name: '',
  user_id: '',
  user_mobile: '',
})

// download导出
const downloadData = async () => {
  let file = await download()
}


</script>

<style lang='scss' scoped></style>